<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
  <meta name="author" content="PIXINVENT">
  <title>部门信息查询与变更</title>
  <link rel="stylesheet" type="text/css" href="app-assets/css/vendors.css">
  <link rel="stylesheet" type="text/css" href="app-assets/css/vertical-menu.css">
  <link rel="stylesheet" type="text/css" href="app-assets/css/bootstrap-extended.css">
</head>

<body>
  <div class="content-wrapper">
    <div class="content-header ">
      <div class="content-header-left mb-2 clearfix">
        <h3 class="content-header-title mb-0">部门信息查询与变更</h3>
      </div>
    </div>
    <div class="card">
      <div class="card-content">
        <div class="card-body">

    <!--       <div class="searchbox">
            <form class="form-inline">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="请填写部门编号">
              </div>
         <div class="form-group">
                <button type="submit" class="btn btn-primary">查询</button>
              </div> 
            </form>
          </div> -->
     <!--      <div class="funcbtn clearfix">
            <div class="pull-left"><a class="btn btn-info" href="添加部门.html">
                添加部门
              </a></div>
          </div> -->

          <div class="container" id="app">
            <div>
              <input type="text" placeholder="search" @input="search" list="cars" class="search">
              <datalist id="cars">
                <option v-for="item in searchlist" :value="item"></option>
              </datalist>
              <input type="button" class="add" @click="add" value="新增">
            </div>
            <div class="tablebox1">
              <table class="table">
                <tr>
                  <th>编号</th>
                  <th>部门名称</th>
                  <th>部门负责人</th>
                  <th>部门成立时间</th>
                  <th>部门岗位数</th>
                  <th>部门总人数</th>
                  <th>操作</th>

                </tr>
                <tr v-cloak v-for="(item, index) of slist">
                  <td>{{index+1}}</td>
                  <td>{{item.department_name}}</td>
                  <td>{{item.department_head}}</td>
                  <td>{{item.Desta_time}}</td>
                  <td>{{item.Dpost_count}}</td>
                  <td>{{item.Dpeople_count}}</td>
                  <td><a href="javascript:;" @click="showOverlay(index)">修改</a> | <a href="javascript:;"
                      @click="del(index)">删除</a></td>
                </tr>
              </table>
            </div>
            <model :list='selectedlist' :isactive="isActive" v-cloak @change="changeOverlay" @modify="modify"></model>
          </div>
</body>

<script type="text/javascript" src="https://unpkg.com/vue@2.3.4/dist/vue.js"></script>
<script type="text/javascript">
  Vue.component('model', {
    props: ['list', 'isactive'],
    template: `<div class="overlay" v-show="isactive">
                        <div class="con">
                        <h2 class="title">新增 | 修改</h2>
                        <div class="content">
                        <table>
                        <tr>
                        <td>部门名称</td>
                        <td><input type="text" v-model="modifylist.department_name"></td>
                        </tr>
                        <tr>
                        <td>部门负责人</td>
                        <td><input type="text" v-model="modifylist.department_head"></td>
                        </tr>
                        <tr>
                        <td>部门成立时间</td>
                        <td><input type="text" v-model="modifylist.Desta_time" placeholder="格式：xxxx-xx-xx"></td>
                        </tr>
                        <tr>
                        <td>部门岗位数</td>  
                        <td><input type="text" v-model="modifylist.Dpost_count"></td>
                        </tr>
                        <tr>
                        <td>部门总人数</td>
                        <td><input type="text" v-model="modifylist.Dpeople_count"></td>
                        </tr>
                        </table>
                        <p>
                        <input type="button" @click="changeActive" value="取消">
                        <input type="button" @click="modify" value="保存">
                        </p>
                        </div>
                        </div>
                    </div>`,
    computed: {
      modifylist() {
        return this.list;
      }
    },
    methods: {
      changeActive() {
        this.$emit('change');
      },
      modify() {
        this.$emit('modify', this.modifylist);
      }
    }
  });
  var app = new Vue({
    el: '#app',
    data: {
      isActive: false,
      selected: -1,
      selectedlist: {},
      slist: [],
      searchlist: [],   //存放搜索后（页面显示的数据）
      list: [   //原始数据（数据库服务器中的数据）
        {
          department_name: '开发部门',
          department_head: '阿凡达',
          Desta_time: '2018-09-18',
          Dpost_count: '50',
          Dpeople_count: '150'
        },
        {
          department_name: '人事部门',
          department_head: '李达',
          Desta_time: '2016-03-18',
          Dpost_count: '20',
          Dpeople_count: '100'
        },
        {
          department_name: '后勤部门',
          department_head: '王曼',
          Desta_time: '2017-09-04',
          Dpost_count: '15',
          Dpeople_count: '50'
        },
        {
          department_name: 'aaa',
          department_head: '赵静子',
          Desta_time: '2018-09-18',
          Dpost_count: '20',
          Dpeople_count: '80'
        },
        {
          department_name: 'bbb',
          department_head: 'lisa',
          Desta_time: '2016-09-18',
          Dpost_count: '30',
          Dpeople_count: '60'
        }
      ]
    },
    created() {
      console.log(Date.now());
      this.setSlist(this.list);
    },
    methods: {
      // 修改数据
      showOverlay(index) {
        this.selected = index;
        this.selectedlist = this.list[index];
        this.changeOverlay();
      },
      // 点击保存按钮
      modify(arr) {
        if (this.selected > -1) {
          Vue.set(this.list, this.selected, arr);
        } else {
          this.list.push(arr);
        }
        this.setSlist(this.list);
        this.changeOverlay();
      },



      add: function () {
        this.selectedlist = {
          department_name: ' ',
          department_head: ' ',
          Desta_time: 'xxxx-xx-xx',
          Dpost_count: ' ',
          Dpeople_count: ' '
        };
        this.isActive = true;

      },
      // delete list in index location
      del(index) {
        this.list.splice(index, 1);
        this.setSlist(this.list);
      },
      changeOverlay() {
        this.isActive = !this.isActive;
      },
      // 获取需要渲染到页面中的数据
      setSlist(arr) {
        this.slist = JSON.parse(JSON.stringify(arr));
      },
      // 搜索
      search(e) {
        var v = e.target.value,
          self = this;
        self.searchlist = [];
        if (v) {
          var ss = [];
          // 过滤需要的数据
          this.list.forEach(function (item) {
            if (item.department_name.indexOf(v) > -1) {
              if (self.searchlist.indexOf(item.department_name) == -1) {
                self.searchlist.push(item.department_name);
              }
              ss.push(item);
            } else if (item.department_head.indexOf(v) > -1) {
              if (self.searchlist.indexOf(item.department_head) == -1) {
                self.searchlist.push(item.department_head);
              }
              ss.push(item);
            }
          });
          this.setSlist(ss); // 将过滤后的数据给了slist
        } else {
          // 没有搜索内容，则展示全部数据
          this.setSlist(this.list);
        }
      }
    },
    watch: {
    }
  })
</script>

<div class="page clearfix">
  <div class="pull-left">共 400 条记录 第 1 / 80 页</div>
  <div class="pull-right">

    <nav aria-label="..." class="pull-left">
      <ul class="pagination">
        <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
        <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
      </ul>
    </nav>

    <div class="pull-left p-r-20  p-l-20"><select class="form-control">
        <option>10条每页</option>
      </select></div>
    <div class="pull-left">跳至<input type="text" value="5" class="form-control">页</div>
  </div>

</div>

</div>


</div>
</div>
</div>
</div>


<script src="app-assets/js/vendors.min.js" type="text/javascript"></script>
<script src="app-assets/js/app-menu.js" type="text/javascript"></script>
<script src="app-assets/js/app.js" type="text/javascript"></script>
<script src="app-assets/js/echarts.min.js" type="text/javascript"></script>
<script src="app-assets/js/sweetalert2.js" type="text/javascript"></script>
<script>

  document.getElementById("demo2").onclick = function () {
    swal({
      title: "确认要取消吗 ？",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "确认",
      closeOnConfirm: false
    }
    )
  };

</script>
</body>

</html>